<template>
  <div class="mnxl-right" :class="{ 'hide': isHidden }">
    <div class="mnxl-right-top">
      <div class="lefthead_con">
        <img class="lefthead_con_img" :src="tableimg" alt="">
        <div class="lefthead_con_text">任务信息</div>
      </div>
      <div class="lefthead_con_right" @click="Dispatchtask">派遣任务</div>
      <!--  -->
      <div class="righttop_con">
        <div class="righttop_con_box">
          <div class="righttop_con_box-item" v-for="(item, index) in simulationdisList" :key="index">
            <img src="../../../../../assets/img/mnxl/righttopimg.png" class="righttop_con_box_item_img" />

            <div class="righttop_con_box_item_left_img">
              <div class="righttop_con_box_item_text">
                <div style="font-size: 1rem;">{{ item.taskName }}</div>
                <div style="font-size:calc(12 / 16 * 1rem) ;">{{ item.taskLeader }} {{ item.taskContent }}</div>
              </div>
              <div class="btn" :class="{ 'btn-red': item.taskStatus === '处理中', 'btn-green': item.taskStatus === '已完成' }"
                @click="Dispatchitembtn(item)">{{ item.taskStatus }}</div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div class="mnxl-right-bottom">
      <div class="lefthead_con">
        <img class="lefthead_con_img" :src="tableimg2" alt="">
        <div class="lefthead_con_text">通知信息</div>
      </div>
      <div class="lefthead_con_right" @click="messageon">发布</div>
      <!--  -->
      <div class="rightbottom_con">
        <div class="rightbottom_con_box">
          <div class="rightbottom_con_box-item" v-for="(item, index) in simulationinforList" :key="index">
            <div class="rightbottom_con_box_item_top">
              <div class="rightbottom_con_box_item_top_left">
                <div>{{ item.publisher }}</div>
              </div>
              <div>{{ item.releaseDate }}</div>
            </div>
            <div class="rightbottom_con_box_item_bottom">
              {{ item.contentSummary }}
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
  <div class="mnxl-right-bottom-btn" @click="EventTermination" :class="{ 'hide': isHidden }">事件终止</div>

  <Eldioa :headtext="Eldioaform.headtext" :dialogVisible="editdialogVisible" @eddialogVisible="updateDialogVisible"
    :elwidth="Eldioaform.elwidth" :elheight="Eldioaform.elheight">
    <template #dialogbody>
      <Elfrom :form-config="editformdataconfig" v-model="editform" :show-actions="false" @elsubmit="elsubmitbtn"
        @selectChange="selectChange" ref="editformRef" />

      <div class="dialog-footer" style="text-align: right;">
        <el-button type="primary" style="background: rgba(4, 134, 254, 1);" @click="elhandleSubmit">
          {{ Eldioaform.headtext == '任务详情' ? '任务完成' : '确认' }}
        </el-button>

        <el-button style="background: transparent;border:1px solid rgba(89, 175, 249, 0.70);color:rgba(1, 194, 255, 1)"
          @click="handleCancel">
          取消
        </el-button>

        <el-button v-if="Eldioaform.headtext == '任务详情'" type="primary" style="background: rgba(4, 134, 254, 1);"
          @click="handleCancel">
          确认
        </el-button>

      </div>

    </template>
  </Eldioa>
</template>

<script setup>
import { ref, onMounted, onUnmounted, inject, computed, nextTick } from 'vue'
import { postsimulationtask, getsimulationdisList, getsimulationdisListId, putsimulationsuccListId, getsimulationinforList, postsimulationinfor, getteamName, getteamNameGroup } from '@/api'
import Eldioa from '@/components/eldioa/index.vue'
import Elfrom from '@/components/elfrom/index.vue'
import formConfig from './mnformconfig'
import { useUserStore } from '@/stores'
import righttop from '@/assets/img/mnxl/righttop.png'
import rightbottom from '@/assets/img/mnxl/rightbottom.png'

const UserStore = useUserStore()


const emits = defineEmits(['Termination'])

const EventTermination = () => {
  emits('Termination')
}

const tableimg = ref(righttop)
const tableimg2 = ref(rightbottom)

// 控制右侧面板显示/隐藏状态
const isHidden = inject('showRight')

// const isHidden =ref(false)

// 获取 DOM 元素引用
let rightPanel = null
let bottomBtn = null

// 切换右侧面板显示/隐藏
const toggleRightPanel = () => {
  // 如果是从隐藏状态切换到显示状态，先移除 hide 类
  if (isHidden.value) {
    if (rightPanel) rightPanel.classList.remove('hide')
    if (bottomBtn) bottomBtn.classList.remove('hide')
  }

  isHidden.value = !isHidden.value
}

// 处理 transition 结束事件
const handleTransitionEnd = (event) => {
  // 只有在隐藏动画结束时才添加 hide 类
  if (isHidden.value && (event.target === rightPanel || event.target === bottomBtn)) {
    event.target.classList.add('hide')
  }
}

//
const simulationdisList = ref([])
const getsimulationdisListapi = async () => {
  const { data } = await getsimulationdisList()
  simulationdisList.value = data
}

const simulationinforList = ref([])

const getsimulationinforListapi = async () => {
  const { data } = await getsimulationinforList()
  simulationinforList.value = data
}






onMounted(() => {
  // 获取 DOM 元素
  rightPanel = document.querySelector('.mnxl-right')
  bottomBtn = document.querySelector('.mnxl-right-bottom-btn')

  // 添加 transitionend 事件监听器
  if (rightPanel) rightPanel.addEventListener('transitionend', handleTransitionEnd)
  if (bottomBtn) bottomBtn.addEventListener('transitionend', handleTransitionEnd)

  getsimulationdisListapi()
  getsimulationinforListapi()
})

onUnmounted(() => {
  // 移除事件监听器
  if (rightPanel) rightPanel.removeEventListener('transitionend', handleTransitionEnd)
  if (bottomBtn) bottomBtn.removeEventListener('transitionend', handleTransitionEnd)
})



defineExpose({
  toggleRightPanel,
  handleTransitionEnd
})

//
const Dispatchtask = async () => {

  editdialogVisible.value = true
  Eldioaform.value.headtext = '派遣任务'
  Eldioaform.value.formtype = '派遣任务'
  Eldioaform.value.elheight = 400

  const teamName = await getteamName()

  editformdataconfig.value[1].columns[1].options = teamName.data

  resetFieldsform(editform.value, editformdata.value)

  setTimeout(() => {
    editformRef.value?.clearValidate()
  }, 100)

}



const Dispatchitembtn = async (btndata) => {

  editdialogVisible.value = true

  Eldioaform.value.headtext = '任务详情'
  Eldioaform.value.formtype = '任务详情'
  Eldioaform.value.elheight = 550
  await resetFieldsform(editform.value, editformdata.value)


  const { data } = await getsimulationdisListId(btndata.id)

  await Object.assign(editform.value, data);


}

const messageon = () => {

  editdialogVisible.value = true
  Eldioaform.value.headtext = '发布'
  Eldioaform.value.formtype = '发布'
  Eldioaform.value.elheight = 260
  resetFieldsform(editform.value, editformdata.value)

  editform.value.publisher = UserStore?.userInfo?.username
  editform.value.releaseDate = new Date().toISOString()

  setTimeout(() => {
    editformRef.value?.clearValidate()
  }, 100)

}


const Eldioaform = ref({
  headtext: '派遣任务',
  elwidth: 746,
  elheight: 400,
  formtype: '新增'
})




const editdialogVisible = ref(false)

const updateDialogVisible = (newValue) => {
  editdialogVisible.value = newValue
  editformRef.value.handleReset()
  resetFieldsform(editform.value, editformdata.value)
}



const editformdataconfig = computed(() => {

  let formconfig = null
  switch (Eldioaform.value.formtype) {
    case '派遣任务':

      formconfig = formConfig.TemplateGeneration
      break;

    case '任务详情':
      formconfig = formConfig.TemplateGenerationitem
      break;
    case '发布':
      formconfig = formConfig.Messagesub
      break;
  }


  return formconfig

})

// 表单数据
const editformdata = computed(() => {
  let formdata = null
  switch (Eldioaform.value.formtype) {
    case '派遣任务':
      formdata = formConfig.TemplateGenerationdata
      break;
    case '任务详情':
      formdata = formConfig.TemplateGenerationitemdata
      break;
    case '发布':
      formdata = formConfig.Messagesubdata
      break;
  }

  return formdata
})


// 表单数据
const editform = ref({ ...editformdata.value })

const editformRef = ref()

// 根据按钮属性提交表单
const elsubmitbtn = async (editsubdata) => {
  console.log('editsubdata', editsubdata)

  switch (Eldioaform.value.formtype) {
    case '派遣任务':
      const mnxl_simulateEventType = sessionStorage.getItem('mnxl_simulateEventType')
      editsubdata.simulateEventType = mnxl_simulateEventType || 'H辐射'
      await postsimulationtask(editsubdata)
      await getsimulationdisListapi()

      break;
    case '任务详情':
      await putsimulationsuccListId(editsubdata.id)
      await getsimulationdisListapi()
      break;

    case '发布':
      await postsimulationinfor(editform.value,)
      await getsimulationinforListapi()
      break;
  }
  resetFieldsform(editform.value, editformdata.value)
  handleCancel()
}


// 确认表单
const elhandleSubmit = async () => {
  if (!editformRef.value) return
  try {
    await editformRef.value.handleSubmit()
  } catch (error) {
    console.error('表单提交失败:', error)
  }
}


// 关闭
const handleCancel = () => {
  if (!editformRef.value) return
  editformRef.value.handleReset()
  editdialogVisible.value = false

  resetFieldsform(editform.value, editformdata.value)


}

// 重置表单
const resetFieldsform = (form, comform) => {
  console.log('form', form, comform)
  Object.keys(form).forEach(key => {
    if (key in comform) {
      form[key] = comform[key]
    } else {
      form[key] = ''
    }
  })
}

//
const selectChange = async (props) => {

  if (props.prop == "rescueTeam") {

    const teamNameGroup = await getteamNameGroup({ teamName: props.value })

    editform.value.taskLeader = teamNameGroup.data.leader

    editformdataconfig.value[3].columns[0].options = teamNameGroup.data.personList
  }

}
</script>

<style lang="less" scoped>
/* 添加隐藏样式 */
.mnxl-right {
  transition: transform 0.3s ease-in-out;

  &.hidden {
    transform: translateX(100%);
  }

  &.hide {
    display: none;
  }
}

.mnxl-right-bottom-btn {
  transition: transform 0.3s ease-in-out;



  &.hide {
    display: none;
  }
}


.mnxl-right {
  position: absolute;
  right: 0;
  width: 430px;
  z-index: 2;
  // background: red;
  height: calc(100vh - 130px);
  overflow-y: auto;
  overflow-x: hidden;
  /* 隐藏滚动条但仍可滚动 */
  scrollbar-width: none;
  margin-right: 24px;

  .mnxl-right-top {
    width: 100%;
    height: 406px;
    background: rgba(21, 33, 86, 0.6);
    position: relative;

    .righttop_con {
      height: 360px;

      .righttop_con_box {
        padding: 20px;
        height: calc(4 * 62px + 3 * 30px);
        display: flex;
        flex-direction: column;
        overflow-y: auto;

        gap: 10px;
        /* 隐藏滚动条但仍可滚动 */
        scrollbar-width: none;


        /* IE and Edge */
        .righttop_con_box-item {
          display: flex;
          width: 100%;
          height: 62px;
          // background: pink;
          align-items: center;
          flex-shrink: 0;
          justify-content: space-between;
          margin-top: 8px;

          .righttop_con_box_item_img {
            width: 54px;
            height: 54px;
            position: relative;
            right: -13px;
          }

          .righttop_con_box_item_left_img {
            width: 352px;
            height: 100%;
            display: flex;
            background: url(/src/assets/img/mnxl/righttopbg.png);
            background-size: 100% 100%;
            justify-content: space-between;
            align-items: center;
            padding-left: 25px;

            .righttop_con_box_item_text {
              margin-left: 15px;
              color: #fff;
            }
          }

          .btn {
            width: 70px;
            height: 26px;
            border-radius: 14px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            margin-right: 30px;
          }

          .btn-red {
            color: rgba(255, 11, 14, 1);
            background: linear-gradient(90deg, rgba(255, 83, 83, 0.55) 0%, rgba(255, 142, 142, 0.12) 100%);
          }

          .btn-green {
            color: rgb(0, 255, 115);
            background: linear-gradient(90deg, rgba(102, 255, 0, 0.55) 0%, rgba(0, 255, 85, 0.12) 100%);

          }
        }

        .righttop_con_box-item:first-child {
          margin-top: 0;
        }


      }

      /* 隐藏 Webkit 浏览器的滚动条 */
      .righttop_con_box::-webkit-scrollbar {
        display: none;
      }
    }

    .lefthead_con_right {
      position: absolute;
      top: 16px;
      right: 31px;
      z-index: 3;
      color: #fff;
      font-size: 12px;
      cursor: pointer;
    }
  }

  .mnxl-right-bottom {
    width: 100%;
    margin-top: 20px;
    height: 525px;
    // height: calc(100vh - 536px);
    background: rgba(21, 33, 86, 0.6);
    position: relative;

    .rightbottom_con {
      height: 479px;

      .rightbottom_con_box {
        padding: 20px;
        height: calc(4 * 103px + 3 * 20px);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        justify-content: space-between;
        gap: 10px;
        /* 隐藏滚动条但仍可滚动 */
        scrollbar-width: none;
        color: #fff;

        /* IE and Edge */
        .rightbottom_con_box-item {
          display: flex;
          width: 100%;
          height: 103px;
          flex-shrink: 0;
          flex-direction: column;
          border-bottom: 1px solid rgba(231, 238, 255, 0.30);

          .rightbottom_con_box_item_top {
            display: flex;
            justify-content: space-between;

            .rightbottom_con_box_item_top_left {
              display: flex;
            }
          }

          .rightbottom_con_box_item_bottom {
            margin-top: 10px;
            width: 100%;
            height: 56px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            font-size: 12px;
            margin-bottom: 10px;
            // overflow: hidden;
            // text-overflow: ellipsis;

            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
          }
        }

        .rightbottom_con_box-item:last-child {
          border: none;
        }
      }

      /* 隐藏 Webkit 浏览器的滚动条 */
      .rightbottom_con_box::-webkit-scrollbar {
        display: none;
      }
    }

    .lefthead_con_right {
      position: absolute;
      top: 16px;
      right: 31px;
      z-index: 3;
      color: #fff;
      font-size: 12px;
      cursor: pointer;
    }
  }


}


/* 隐藏 Webkit 浏览器的滚动条 */
.mnxl-right::-webkit-scrollbar {
  display: none;
}



.mnxl-right-bottom-btn {
  cursor: pointer;
  position: absolute;
  text-align: center;
  line-height: 38px;
  bottom: 40px;
  background: red;
  right: 474px;
  z-index: 3;
  width: 120px;
  height: 38px;
  color: #fff;
  border-radius: 4px;
}

.lefthead_con {
  width: 430px;
  background: url(../../../../../assets/img/components/lefthead.png);
  background-size: 100% 100%;
  height: 46px;
  position: relative;
  top: 0;
  display: flex;
  align-items: center;
  z-index: 3;

  .lefthead_con_img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    margin-left: 12px
  }

  .lefthead_con_text {
    height: 22px;
    font-family: ZHDH, ZHDH;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    background: linear-gradient(to bottom, #FFFFFF 0%, #92CDFF 100%);
    /* 渐变背景 */
    -webkit-background-clip: text;
    /* 将背景裁剪到文字 */
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 文字填充色透明，显示背景渐变 */
    color: transparent;
  }
}
</style>